<web-subscribe class="unresolved">
  <div class="wrapper">
    <div class="headline all-center flow">
      <h2 class="headline__title">{{ subscribeTitle | default('Developer Newsletter', false) }}</h2>
      <p class="subscribe__message">{{ subscribeNotes | default('Get the latest news, techniques and updates straight to your inbox.', false) }}</p>
    </div>
    <form class="flow gap-top-size-2" action="{{ site.subscribeForm }}" method="post">
      <div class="switcher">
        <div>
          <label class="visually-hidden" for="sub-firstname">{{ 'i18n.subscribe.first_name' | i18n(locale) }}</label>
          <input id="sub-firstname" name="FirstName" placeholder="{{ 'i18n.subscribe.first_name' | i18n(locale) }}" required
            type="text" />
        </div>
        <div>
          <label class="visually-hidden" for="sub-lastname">{{ 'i18n.subscribe.last_name' | i18n(locale) }}</label>
          <input id="sub-lastname" name="LastName" placeholder="{{ 'i18n.subscribe.last_name' | i18n(locale) }}" required
            type="text" />
        </div>
      </div>
      <div>
        <label class="visually-hidden" for="sub-email">{{ 'i18n.subscribe.your_email' | i18n(locale) }}</label>
        <input id="sub-email" name="EmailAddress" placeholder="{{ 'i18n.subscribe.your_email' | i18n(locale) }}" required
          type="email" />
      </div>
      <div>
        <label class="visually-hidden" for="sub-country">{{ 'i18n.subscribe.country' | i18n(locale) }}</label>
        <select id="sub-country" name="Country" required>
          {% for country in countries %}
            {% if country[1] === "United States" %}
              <option selected value="{{country[0]}}">{{country[1]}}</option>
            {% else %}
              <option value="{{country[0]}}">{{country[1]}}</option>
            {% endif %}
          {% endfor %}
        </select>
      </div>
      <div class="all-center">
        <p class="color-mid-text">
          {{ 'i18n.subscribe.notice' | i18n(locale) }}
        </p>
      </div>
      <div class="cluster gutter-base flex-align-start gap-top-size-2">
        <input id="sub-newsletter" name="WebDevNewsletter" required value="Unconfirmed" type="checkbox" />
        <label for="sub-newsletter">{{ 'i18n.subscribe.add_me' | i18n(locale) }}</label>
      </div>
      <div class="cluster gutter-base flex-align-start">
        <input id="sub-pii-spii" name="collects-pii-spii-checkbox" required value="Unconfirmed" type="checkbox" />
        <label for="sub-pii-spii">
          {{ 'i18n.subscribe.i_accept_terms' | i18n(locale) | safe}}
        </label>
      </div>
      <div class="visually-hidden">
        <label for="sub-language">{{ 'i18n.subscribe.language' | i18n(locale) }}</label>
        <select id="sub-language" name="LanguagePreference" required tabindex="-1">
          <option selected value="en-US">en-US</option>
        </select>
      </div>
      <div
        class="g-recaptcha captcha all-center gap-top-size-1"
        data-sitekey="{{ site.recaptchaSiteKey }}"
        data-callback="recaptchaSuccess"
      >
        <div class="captcha__placeholder">
          <svg viewBox="0 0 6 6" class="spinner">
            <circle cx="3" cy="3" r="2.5" />
          </svg>
        </div>
      </div>
      <div class="gap-top-size-2">
        <div class="subscribe__error hidden-yes">
          {% Aside 'warning' %}
            <p class="subscribe__error__message"></p>
          {% endAside %}
        </div>
        <noscript>{% Aside 'warning' %}{{ 'i18n.subscribe.no_javascript' | i18n(locale) }}{% endAside %}</noscript>
      </div>
      <div class="all-center gap-top-size-1">
        <div>
          <button class="button" type="submit" data-type="primary">
            {{ 'i18n.subscribe.subscribe' | i18n(locale) }}
          </button>
        </div>
      </div>
    </form>
  </div>
</web-subscribe>
